<template>
	<view>
		<form @submit="formSubmit">
			<view class="rowsb padding border_bottom ">
				<view class="fs28 col333 bold" style="line-height: 100rpx;">头像</view>
				<image :src="tempFilePathsData" mode="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #F1F1F1;"
				 @click="uploadImg"></image>
			</view>
			<view class="rowsb     border_bottom  padding">
				<view class="fs28 col333 bold">真实姓名</view>
				<input class="fs28 col666 trt" type="text" placeholder="请输入真实姓名" name="name" v-model="name">
			</view>

			<view class="rowsb padding border_bottom">
				<view class="fs28 col333 bold">生日</view>
				<picker mode="date" :value="date" start="1930-09-01" end="2080-09-01" @change="DateChange" name="birthday">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
			<view class="rowsb padding border_bottom">
				<view class="fs28 col333 bold">性别</view>
				<picker @change="PickerChange" :value="index" :range="picker" >
					<view class="picker">
						{{index>-1?picker[index]:'请选择性别'}}
					</view>
				</picker>
			</view>
			<view class="rowsb padding border_bottom">
				<view class="fs28 col333 bold">邮箱</view>
				<input class="fs28 col666 trt" type="text" placeholder="请输入邮箱" name="email" v-model="email">
			</view>
			<view class="rowsb padding border_bottom">
				<view class="fs28 col333 bold">手机号码</view>
				<input class="fs28 col666 trt" type="number" maxlength="11" placeholder="请输入手机号码" name="tel" v-model="tel">
			</view>
			<view class="rowsb padding border_bottom">
				<view class="fs28 col333 bold">详细地址</view>
				<input class="fs28 col666 trt" type="text" placeholder="请输入详细地址" name="address" v-model="address">
			</view>
			<button form-type="submit" class="submit_button bg-white">保存</button>
		</form>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		upImgData,
		perfectUser
	} from '../../common/path.js'
	export default {
		data() {
			return {
				tempFilePathsData: '', //展示的值
				userImg: '', //上传的值
				index: -1,
				picker: ['男', '女'],
				date: '请选择日期' ,//日期
				tel:'',//手机号
				address:'',//地址
				email:'',//邮箱
			}
		},
		onLoad() {
			console.log('获取到的资料信息===>',app.userInfo);
			if(app.userInfo.birthday){
				
			this.date = app.userInfo.birthday
			}
			
			this.tempFilePathsData = app.image +app.userInfo.img
			this.userImg = app.userInfo.img
			this.tel = app.userInfo.tel
			this.address = app.userInfo.address
			this.email = app.userInfo.email
			this.name = app.userInfo.name
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
			},
			//日期选择
			DateChange(e) {
				this.date = e.detail.value
			},
			//头像
			uploadImg() {
				console.log(upImgData)
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: (zifan) => {
						uni.uploadFile({
							url: upImgData,
							filePath: zifan.tempFilePaths[0],
							name: 'image',
							success: (res) => {
								let analysisImg = JSON.parse(res.data)
								that.tempFilePathsData = zifan.tempFilePaths[0]
								that.userImg = analysisImg.data.src
								console.log('图片', that.tempFilePathsData)
								console.log('图片2', that.userImg)
								that.$tools.showToast("选择图片成功")
							},
							fail: err => {
								that.$tools.showToast('选择失败', 'none')
								console.log(err)
							}
						})
					}
				})
			},
			//提交
			formSubmit(event) {
				event.detail.value.img = this.userImg
				event.detail.value.id = app.userInfo.id
				event.detail.value.sex = this.index+1
				console.log('获取到的值', event.detail.value)
				if (this.$tools.fordataInfo(event.detail.value)) {
					this.$axios.axios('POST', perfectUser, event.detail.value)
						.then(res => {
							if (res.status == 1) {
								this.$tools.showToast('成功')
								setTimeout(r => {
									this.$tools.navigateBack()
								}, 1000)
							} else {
								this.$tools.showToast('失败')
							}
						})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: white;
	}

	.border_bottom {
		border-bottom: 3rpx solid #F1F1F1;
	}

	.submit_button {
		margin: 50rpx auto;
		width: 300rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 10rpx;
		border: 3rpx solid #F1F1F1;
		color: #666666;
		text-align: center;
	}
</style>
